<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <link href="aln.jpg"  type="image/x-icon">
    <title>在线聊天程序</title>
  <style>
      html{
          background-color: #5e5e5e;
          /*background: url("../images/head.gif") no-repeat center center;*/
      }
    body {
        /*background-color: unset;*/
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
    }
    .caidan{
        background-color: slategray;
    }
    .chat-container {
      max-width: 600px;
      margin: 50px auto;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      height: 500px;
    }

    .header {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }

    .avatar {
      position: relative;
      margin-top: -10px;
      margin-bottom: 20px;
    }

    .avatar img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .status {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #2ecc71;
    }

    .menu ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      height: calc(100% - 40px);
    }

    .menu ul li {
      padding: 10px;
      cursor: pointer;
      position: relative;
      margin-bottom: 30px;
    }

    .menu ul li:hover {
      background-color: #f2f2f2;
    }

    .menu .submenu ul {
      display: none;
      position: absolute;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      left: 100%;
      top: 0;
    }

    .menu .submenu:hover > ul {
      display: block;
      top: 0;
      left: 100%;
    }

    .menu .submenu ul li {
      position: relative;
    }

    .menu .submenu ul li ul {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .menu .submenu ul li:hover > ul {
      display: block;
      top: 0;
      left: 100%;
    }
    .chat-window {
      padding: 20px;
      min-height: 400px;
      width: 80%;
    }
  </style>
</head>
<body>
<!-- 在body标签下添加一个用于显示菜单的容器 -->
<div id="menu-container" style="display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 10px; flex-direction: column;">
    <button id="makemassege"></button><br>
    <button id="deleteuser"></button><br>
</div>
<div class="chat-container">
  <div class="header">
    <div class="right-sidebar">
      <div class="avatar">
        <a class="status-b" href="A.html"><span class="status"></span></a>
        <a href="A.html"><img class="avtar1" id="avtar1" src="#" alt="头像"></a>
      </div>
      <div class="menu">
        <ul class="caidan">
          <li class="submenu">好友
            <ul>
<!--              <li class="submenu">好友1-->
<!--                <ul>-->
<!--                  <li class="submenu">聊天-->
<!--&lt;!&ndash;                    <ul>&ndash;&gt;-->
<!--&lt;!&ndash;                      <li>子菜单1</li>&ndash;&gt;-->
<!--&lt;!&ndash;                      <li>子菜单2</li>&ndash;&gt;-->
<!--&lt;!&ndash;                    </ul>&ndash;&gt;-->
<!--                  </li>-->
<!--                  <li>删除</li>-->
<!--                </ul>-->
<!--              </li>-->
<!--              <li class="submenu">好友2-->
<!--                <ul>-->
<!--                  <li class="submenu">聊天-->
<!--                    <ul>-->
<!--                      <li>子菜单3</li>-->
<!--                      <li>子菜单4</li>-->
<!--                    </ul>-->
<!--                  </li>-->
<!--                  <li>删除</li>-->
<!--                </ul>-->
<!--              </li>-->
            </ul>
          </li>
            <li class="friend">朋友圈</li>
          <li  class="message">消息</li>
          <li>收藏</li>
          <li>更多</li>
        </ul>
      </div>
    </div>
    <div class="chat-window">
      <!-- 聊天窗口内容 -->
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let username;
    $(document).ready(function() {
      setInterval(function (){
          $.ajax({
              type: 'GET',
              url: 'http://192.168.43.172:8080/chat/GetAvatar',
              data: {
              },
              dataType: "json",
              success: function (response){
                  console.log(response.user.username);
                  $('#avtar1').attr('src',"data:image/jpeg;base64,"+response.user.photo);
                  // $('#div').value=response.Friends.avatar;
              },
              error:function (response){
                  console.log("请求处理失败8");
              }
          })
      },9000);
      // 点击子菜单项时的操作
    $('.submenu li').click(function() {
      // 在这里添加你想要执行的操作
    });
    // 鼠标悬停时显示子菜单项
    $('.menu .submenu').hover(function() {
      $(this).children('ul').css('display', 'block');
    }, function() {
      $(this).children('ul').css('display', 'none');
    });
    var r;
      $('.chat-window').append($("<iframe  style='width: 100%; height: 420px;' class='frame' id='frame' ></iframe>"));
      document.getElementById('frame');
      $('.submenu').on('click',function (){
          console.log(121);
        var iframe = $('#frame').contents();// 给每个标签添加左击事件监听器
        // 在iframe中添加新元素
        $.ajax({
            type: 'POST',
            url: 'http://192.168.43.172:8080/chat/Chatserver?flag=get',
            data: {
            },
            dataType: "json",
            success: function (response){
                // console.log(response.Friends);
                var iframe = $('#frame').contents();
                iframe.find('body').empty();
                iframe.find('body').append('<span style="display: flex;"><h2 style="display: inline-block;">头像</h2><h2 style="display: inline-block;margin-left: auto;">昵称名</h2><h2 style="display: inline-block;margin-left: auto;width: 150px;">账号</h2></span>');
                for (var i=0;i<response.Friends.length;i++){
                    console.log(123);
                    // iframe.find('body').append('<div  style=" margin-top:30px;display: flex; "><img style="width:40px;height: 40px; display: inline-block; border-radius: 50%;" src="'+'http://localhost:8080/chat/GetAvatar?userID='+response.Friends[i].userID+'" alt="头像"><span style="  position: absolute;left: 35px;width: 10px;height: 10px;border-radius: 50%;background-color: #2ecc71;"></span><div style=" display: inline-block; margin-left: auto;font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; align-items: center;">'+response.Friends[i].nickname+'</div><div style="margin-left: auto;text-align: left;width: 150px; /*justify-content: center; align-items: center;*/">'+response.Friends[i].username+'</div></div>');
                    iframe.find('body').append('<div  style=" margin-top:30px;display: flex; "><img style="width:40px;height: 40px; display: inline-block; border-radius: 50%;" src="data:image/jpeg;base64,'+response.Friends[i].photo+'" alt="头像"><span style="  position: absolute;left: 35px;width: 10px;height: 10px;border-radius: 50%;background-color: #2ecc71;"></span><div style=" display: inline-block; margin-left: auto;font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; align-items: center;">'+response.Friends[i].nickname+'</div><div style="margin-left: auto;text-align: left;width: 150px; /*justify-content: center; align-items: center;*/">'+response.Friends[i].username+'</div></div>');
                }
            },
            error:function (response){
                console.log("请求处理失败8");
            }
        });
// 给每个标签添加左击事件监听器
        iframe.find('body').on('click', 'div', function (event) {
            // 获取标签的信息
            const nickname = $(this).find('div:eq(0)').text();
            username = $(this).find('div:eq(1)').text().trim().replace("ID: ", "");
            const imgSrc = $(this).find('img').attr('src');
            // 在控制台打印标签信息
            console.log("昵称：", nickname);
            console.log("用户ID：", username);
            // console.log("头像链接：", imgSrc);
            // 获取点击的坐标位置
            const x = event.clientX;
            const y = event.clientY;
            // 将菜单框显示在点击的位置
            const menuContainer = $("#menu-container");
            menuContainer.css({ left: 400+x + "px", top: y+80 + "px", display: "block" });
            // 将标签信息显示在菜单框中
            $("#deleteuser").text("删除好友");
            $("#makemassege").text("发消息");
        });
// 点击空白处隐藏菜单框
        $(document).on('click', function (event) {
            const menuContainer = $("#menu-container");
            if (!menuContainer.is(event.target) && menuContainer.has(event.target).length === 0) {
                menuContainer.hide();
            }
        });
    });
    $('.message').on('click',function (){
    });
  });
</script>
<script>
    $(document).ready(function() {
        // ...其他代码...
        // 点击 "发消息" 按钮时的操作
        $("#makemassege").on('click',function (){
            console.log("发消息按钮点击");// 找到 iframe 并清空其内容
            var iframe = $('#frame').contents();
            iframe.find('body').empty();
            // 添加几个列的 div 标签到 iframe 中
            // iframe.find('body').append('<span style="display: flex;"><h2 style="display: inline-block;">头像</h2><h2 style="display: inline-block;margin-left: auto;">昵称名</h2><h2 style="display: inline-block;margin-left: auto;width: 150px;">账号</h2></span>');
            // iframe.find('body').append('<div style="margin-top:30px;display: flex;"><img style="width:40px;height: 40px; display: inline-block; border-radius: 50%;" src="" alt="头像"><div style="display: inline-block; margin-left: auto;font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; align-items: center;">昵称1</div><div style="margin-left: auto;text-align: left;width: 150px;">账号1</div></div>');
            // iframe.find('body').append('<div style="margin-top:30px;display: flex;"><img style="width:40px;height: 40px; display: inline-block; border-radius: 50%;" src="" alt="头像"><div style="display: inline-block; margin-left: auto;font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; align-items: center;">昵称2</div><div style="margin-left: auto;text-align: left;width: 150px;">账号2</div></div>')
            $.ajax({
                type: 'POST',
                url: 'http://192.168.43.172:8080/chat/SetFriend?username='+username,
                data: {
                },
                dataType: "json",
                success: function (response){
                    console.log(response.flag);
                },
                error:function (response){
                    console.log("请求处理失败8");
                }
            });
            document.getElementById('frame').src='massege.html';
            document.getElementById('menu-container').style.display='none';
        });
    });
</script>
</body>
</html>
